<!--
 * @Author: 赵宇
 * @Description: 这是支付页面
 * @Date: 2024-02-15 23:45:33
 * @LastEditTime: 2024-12-18 21:44:49
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \dance\pages\pay\pay.vue
-->
<template>
  <view class="results">
    <!-- 头部 -->
    <uv-status-bar bgColor="#fafafa"></uv-status-bar>
    <!--自定义头部 -->
    <z-navbar title="支付结果"></z-navbar>
    <view class="results-info">
      <view class="name">课程：{{ rData?.lesson?.name || '暂无' }}</view>
      <view class="content">
        <view class="icon">
          <uv-icon name="duigou" custom-prefix="custom-icon" color="#FF7A66" size="80.233rpx"></uv-icon>
        </view>
        约课成功
      </view>
    </view>
    <view class="results-box">
      <view class="results-box-text">卷码：</view>
      <view class="results-box-no">{{ routerVal.out_trade_no }}</view>
      <view class="results-box-qrcode">
        <uv-qrcode ref="qrcodeRef" size="301.744rpx" :value="qrcodeJson"></uv-qrcode>
      </view>
      <view class="results-box-teacher">
        {{ rData?.lesson?.teacher?.username }}
      </view>
      <view class="results-box-merchant">
        <view> {{ rData?.lesson?.merchant?.headquater?.name }}( {{ rData?.lesson?.merchant?.name }}) </view>
        <view style="marginTop: 3px">{{ rData?.issueDate }}&nbsp;&nbsp;{{ rData.timeDuration }}</view>
      </view>
    </view>
    <view class="results-line">
      <uv-line color="#959595" margin="48.837rpx 0 22.674rpx 0"></uv-line>
    </view>
    <view class="results-bottom" @click="onGoOrderList"> <text>前往</text><text class="results-bottom-text">我的订单</text>查看</view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js';
  import { reactive, ref, nextTick, computed } from 'vue';
  const toastRef = ref();
  const qrcodeRef = ref();
  let routerVal = ref({});
  let httpData = reactive({
    data: {},
    order: {}
  });
  let rData = computed(() => {
    return httpData.order;
  });
  let qrcodeJson = ref();
  onLoad(async option => {
    routerVal.value = option;
    qrcodeJson.value = JSON.stringify({
      id: option.timetableID, // 课程id
      tSerial: option.out_trade_no, // 流水no
      tId: option.id // 流水id
    });
    nextTick(() => {
      qrcodeRef.value.make();
    });
    getOrderData();
  });
  const onGoOrderList = () => {
    uni.navigateTo({
      url: '/pages/order/index'
    });
  };
  // 获取单据信息
  const getOrderData = async () => {
    const result = await uni.$uv.http.post('app/lesson/show', {
      id: Number(routerVal.value.timetableID)
    });
    httpData.order = { ...result, issueDate: dayjs(result.issueDate).format('YYYY-MM-DD') };
  };
</script>

<style lang="scss" scoped>
  .results {
    background-color: #fafafa;
    min-height: 100vh;
    color: #000;
    font-size: 34.884rpx;

    &-info {
      box-sizing: border-box;
      margin: 0 26.163rpx;
      border-radius: 14rpx;
      background-color: #fff;
      box-shadow: 0px 1px 4px 0px #00000040;
      padding: 47.093rpx 48.837rpx;
      height: 348.837rpx;
      margin-bottom: 15.698rpx;
      .name {
        font-size: 27.907rpx;
        color: #656565;
        text-align: center;
        margin-bottom: 68.023rpx;
      }
      .content {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 41.86rpx;
        font-weight: 700;
        .icon {
          margin-right: 15.698rpx;
        }
      }
    }

    &-box {
      margin: 0 26.163rpx;
      border-radius: 14rpx;
      background-color: #fff;
      box-shadow: 0px 1px 4px 0px #00000040;
      padding: 47.093rpx 48.837rpx 88.953rpx 48rpx;

      &-no {
        color: $dance-main-color;
        margin-bottom: 47.093rpx;
      }

      &-qrcode {
        display: flex;
        justify-content: center;
      }
      &-teacher {
        color: #656565;
        font-size: 27.907rpx;
        text-align: center;
        margin-top: 62.791rpx;
      }
      &-merchant {
        color: #656565;
        font-size: 27.907rpx;
        text-align: center;
        margin-top: 73.256rpx;
      }
    }

    &-line {
      margin: 0 26.163rpx;
    }

    &-bottom {
      margin: 0 26.163rpx;
      font-size: 27.907rpx;
      &-text {
        color: $dance-main-color;
      }
    }
  }
</style>
